<div w-i18n-ns="app.ui" class="transaction-confirm">
    <w-step-by-step active-step="$ctrl.step">
        <w-step>

            <div ng-if="$ctrl.tx" class="row margin-2 plate-wrapper">
                <div class="plate-warning">
                    <div class="body-2 margin-05 warning-500"
                         w-i18n="confirmGatewayTransaction.warningTitle"></div>
                    <div class="footnote-1 basic-500"
                         w-i18n="confirmGatewayTransaction.warningText"
                         params="{name: $ctrl.tx.amount.asset.name}"></div>
                </div>
            </div>

            <w-tabs class="inner" ng-model="$ctrl.activeTab" ng-if="::$ctrl.advancedMode">
                <w-tab title-name="::'confirmTransaction.details'" id="::'details'">
                    <div ng-if="$ctrl.tx && $ctrl.gatewayDetails && $ctrl.targetRecipient" class="row margin-2">
                        <div class="margin-top-4">
                            <div class="section">
                                <div class="key"
                                     w-i18n="confirmGatewayTransaction.fieldAddress"></div>
                                <div class="value">{{::$ctrl.targetRecipient}}</div>
                            </div>

                            <div class="section">
                                <div class="key"
                                     w-i18n="confirmGatewayTransaction.fieldAmount"></div>
                                <div class="value">{{::$ctrl.tx.amount.toFormat()}}
                                    {{::$ctrl.tx.amount.asset.displayName}}
                                </div>
                            </div>

                            <div class="section">
                                <div class="key"
                                     w-i18n="confirmGatewayTransaction.fieldFee"></div>
                                <div class="value">{{::$ctrl.tx.fee.toFormat()}} {{::$ctrl.tx.fee.asset.displayName}}
                                </div>
                            </div>

                            <div class="section">
                                <div class="key"
                                     w-i18n="confirmGatewayTransaction.fieldGatewayAddress"></div>
                                <div class="value">{{::$ctrl.gatewayDetails.address}}</div>
                            </div>

                            <div class="section">
                                <div class="key"
                                     w-i18n="confirmGatewayTransaction.fieldGatewayFee"></div>
                                <div class="value">{{::$ctrl.gatewayDetails.gatewayFee}}
                                    {{::$ctrl.tx.amount.asset.displayName}}
                                </div>
                            </div>
                        </div>

                    </div>
                </w-tab>
                <w-tab title-name="::'confirmTransaction.JSON'" id="::'JSON'">
                    <w-transaction-info-json signable="$ctrl.signable" class="margin-top-4"></w-transaction-info-json>
                </w-tab>
                <w-tab ng-if="$ctrl.canCreateLink" title-name="::'confirmTransaction.export'" id="::'export'">
                    <w-transaction-export class="margin-top-4" link="$ctrl.exportLink"></w-transaction-export>
                </w-tab>
            </w-tabs>

            <div ng-if="!$ctrl.advancedMode && $ctrl.tx && $ctrl.gatewayDetails && $ctrl.targetRecipient"
                 class="row margin-2">

                <div class="section">
                    <div class="key"
                         w-i18n="confirmGatewayTransaction.fieldAddress"></div>
                    <div class="value">{{::$ctrl.targetRecipient}}</div>
                </div>

                <div class="section">
                    <div class="key"
                         w-i18n="confirmGatewayTransaction.fieldAmount"></div>
                    <div class="value">{{::$ctrl.tx.amount.toFormat()}} {{::$ctrl.tx.amount.asset.displayName}}</div>
                </div>

                <div class="section">
                    <div class="key"
                         w-i18n="confirmGatewayTransaction.fieldFee"></div>
                    <div class="value">{{::$ctrl.tx.fee.toFormat()}} {{::$ctrl.tx.fee.asset.displayName}}</div>
                </div>

                <div class="section">
                    <div class="key"
                         w-i18n="confirmGatewayTransaction.fieldGatewayAddress"></div>
                    <div class="value">{{::$ctrl.gatewayDetails.address}}</div>
                </div>

                <div class="section">
                    <div class="key"
                         w-i18n="confirmGatewayTransaction.fieldGatewayFee"></div>
                    <div class="value">{{::$ctrl.gatewayDetails.gatewayFee}} {{::$ctrl.tx.amount.asset.displayName}}
                    </div>
                </div>

            </div>

            <div ng-if="$ctrl.errorMessage" class="error-400 margin-top-1 margin-2">
                {{$ctrl.errorMessage}}
            </div>

            <div class="bottom-wrapper">
                <div class="buttons-wrapper">
                    <w-button class="big" on-click="$ctrl.onClickBack()">
                        <span w-i18n="confirmGatewayTransaction.back"></span>
                    </w-button>
                    <w-button class="big submit"
                              w-next-step
                              on-click="$ctrl.confirm()">
                        <span w-i18n="confirmGatewayTransaction.confirm"></span>
                    </w-button>
                </div>
            </div>
        </w-step>
        <w-step>
            <div class="icon icon-tx-success margin-2"></div>
            <h2 class="text-center basic-900 margin-4" w-i18n="confirmGatewayTransaction.success"></h2>
            <div class="text-center">
                <w-button class="submit half big" on-click="$ctrl.showTxInfo()">
                    <span w-i18n="confirmTransaction.details"></span>
                </w-button>
            </div>
        </w-step>
    </w-step-by-step>
</div>
